<template>
	<view>
		<view class="searchContainer" :style="{ 'background-color': backgroundColor }" @click="clickHandler">
			<!-- 使用 view 组件模拟 input 输入框的样式 -->
			<view class="searchBox" :style="{ 'border-radius': borderRadius + 'px' }">
				<uni-icons type="search" size="17"></uni-icons>
				<text class="searchTitle">搜索</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'my-search',
	data() {
		return {}
	},

	props: {
		backgroundColor: {
			default: '#c00000',
			type: String
		},
		borderRadius: {
			default: 18,
			type: Number
		}
	},
	methods: {
		// 在根元素绑定点击事件
		clickHandler() {
			// 通过自定义事件为外界提供低耦合的点击事件
			this.$emit('searchClick')
		}
	}
}
</script>

<style lang="scss">
.searchContainer {
	padding: 0 10px;
	height: 50px;
	display: flex;
	align-items: center;
	// background-color: #c00000;

	.searchBox {
		height: 36px;
		background-color: #fff;
		// border-radius: 18px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.searchTitle {
			margin-left: 5px;
			font-size: 15px;
		}
	}
}
</style>
